<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: gray;
      }
      .mydiv {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box active" id="myid" myid="2">
        world
        <span>123456</span>
      </div>
      hello
    </div>
    <script>
      //  1.获取或者设置 元素的 文本内容 ；innerText 不能解析超文本  也不能获取超文本；
      //   var containerEle = document.querySelector(".container");
      //   var boxEle = containerEle.querySelector(".box");
      //   console.log(boxEle);
      //   console.log(boxEle.innerText);
      //   document.onclick = function () {
      //     boxEle.innerText = "<h1>123</h1>";
      //   };

      //2.获取或者设置超文本内容  innerHTML; 可以解析超文本  也可以获取超文本；
      //   var boxEle = document.querySelector(".box");
      //   console.log(boxEle.innerHTML);
      //   document.onclick = function () {
      //     boxEle.innerHTML = "<h1>123456</h1>";
      //   };

      // 3.获取或者设置行间样式；style
      // 获取 行间的样式；
      //   var boxEle = document.querySelector(".box");
      //   document.onclick = function () {
      //     console.log(boxEle.style["background-color"]);
      //   };
      //   // 设置行间样式；
      //   document.onclick = function () {
      //     boxEle.style.backgroundColor = "pink";
      //   };

      //   4.获取或者设置类名；className
      // 获取 ；
      // var boxEle = document.querySelector(".box");
      //   document.onclick = function () {
      //     console.log(boxEle.className);
      //   };

      // 设置
      //document.onclick = function () {
      // var classStr = boxEle.className;
      // boxEle.className = classStr + " mydiv";

      // boxEle.className = boxEle.className + " mydiv";
      // boxEle.className += " mydiv";
      //};

      //   5.元素的属性操作；
      // 一、获取元素的属性值；
      //   var boxEle = document.querySelector(".box");
      //   document.onclick = function () {
      //     var res = boxEle.getAttribute("myid");
      //     console.log(res);
      //   };

      //二、设置元素的属性；setAttribute
      //   var boxEle = document.querySelector(".box");
      //   document.onclick = function () {
      //     boxEle.setAttribute("myattr", "hello");
      //   };

      // 三 、删除属性removeAttribute("属性名");
      var boxEle = document.querySelector(".box");
      document.onclick = function () {
        boxEle.removeAttribute("class");
      };
    </script>
  </body>
</html>
